import {
	MenuFoldOutlined,
	MenuUnfoldOutlined,
	UploadOutlined,
	UserOutlined,
	HomeOutlined,
	VideoCameraOutlined,
	FormOutlined
} from '@ant-design/icons';
import { Layout, Menu, theme } from 'antd';
import React, { useState } from 'react';
import { Switch } from 'react-router-dom';
import AuthRoute from '../components/AuthRoute';
import { useAuth } from "../context/AuthProvider";
import HomeHeader from '../components/home/header';

const { Header, Sider, Content } = Layout;

const Home = ({routes,history,location:{pathname}}) => {
	const {user,setUser,deleteUser} = useAuth();

	const [collapsed, setCollapsed] = useState(false);
	const {
		token: { colorBgContainer },
	} = theme.useToken();

	const go = ({key}) => {
		history.push(key)
	}
  return (
    <Layout>
		<Sider trigger={null} collapsible collapsed={collapsed}>
			<div className="logo" />
			<Menu
				theme="dark"
				mode="inline"
				selectedKeys={{pathname}}
				onClick={go}
				items={[
					{
						key: '/',
						icon: <HomeOutlined />,
						label: '首页',
					},
					{
						key: '/user',
						icon: <UserOutlined />,
						label: '用户管理',
					},
					{
						key: '/video',
						icon: <VideoCameraOutlined />,
						label: '视频管理',
					},
					{
						key: '/upload',
						icon: <UploadOutlined />,
						label: '文件管理',
					},
					{
						key: '/subDraft',
						icon: <FormOutlined />,
						label: '投稿管理',
					},
				]}
			/>
		</Sider>
		<Layout className="site-layout">
			<Header
				style={{
					padding: 0,
					background: colorBgContainer,
					display:'flex',
					justifyContent:'space-between',
					alignItems:'center'
				}}
			>
				{React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
					className: 'trigger',
					onClick: () => setCollapsed(!collapsed),
				})}
				
				<HomeHeader user={user} setUser={setUser} deleteUser={deleteUser} />
			</Header>
			<Content
				style={{
					margin: '24px 16px',
					padding: 24,
					height:700,
					background: colorBgContainer,
					overflow:'auto'
				}}
			>
				<Switch>
					{
						routes.map((route,index)=>{
							return <AuthRoute key={index} {...route} />
						})
					}
				</Switch>
			</Content>
		</Layout>
    </Layout>
  );
}

export default Home;